<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>导航助手</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  </head>
  <body>
    <div class="container">
      <div class="map-section">
        <div id="container"></div>
        <div class="overlay" id="overlay"></div>
        <!-- 操作指引 -->
        <div id="instructions">
          <h2>欢迎使用导航助手</h2>
          <p>您知道自己的当前位置吗？</p>
          <div class="button-group">
            <button id="knowLocation" class="btn">知道，点击地图选择位置</button>
            <button id="needLocation" class="btn btn-secondary">不知道，帮我定位</button>
          </div>
          <div id="loading">正在获取您的位置...</div>
        </div>
        <!-- 导航方式选择 -->
        <div class="nav-type-container" id="navTypeContainer">
          <button id="drivingBtn">驾车导航</button>
          <button id="walkingBtn" class="active">步行导航</button>
        </div>
      </div>
      <div class="panel-section" id="panel"></div>
      <div class="navigation-result">
        <div id="route-info"></div>
        <div id="map"></div>
        
        <!-- 命令行界面 -->
        <div class="command-line-container">
            <h3>位置选择</h3>
            <div class="dropdown-container">
                <select id="stair-select" class="dropdown-select">
                    <option value="st1">楼梯口1</option>
                    <option value="st2">楼梯口2</option>
                    <option value="st3">楼梯口3</option>
                    <option value="st4">楼梯口4</option>
                    <option value="st5">楼梯口5</option>
                    <option value="st6">楼梯口6</option>
                </select>
                <select id="floor-select" class="dropdown-select">
                    <option value="">选择楼层</option>
                    <option value="0">地面层</option>
                    <option value="1">1楼</option>
                    <option value="2">2楼</option>
                    <option value="3">3楼</option>
                    <option value="4">4楼</option>
                    <option value="5">5楼</option>
                    <option value="6">6楼</option>
                    <option value="7">7楼</option>
                </select>
                <select id="room-select" class="dropdown-select" disabled>
                    <option value="">选择教室</option>
                </select>
            </div>
            <button id="navigate-btn" class="btn">开始导航</button>
            <div class="command-output-container">
                <pre id="command-output" class="command-output"></pre>
            </div>
        </div>
      </div>
    </div>

    <!-- 引入高德地图API -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "e9a6f9780ba7393f07215d9d76e49ce3",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script src="{{ url_for('static', filename='config/map-config.js') }}"></script>
    <script src="{{ url_for('static', filename='js/map.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ui.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const mapManager = new MapManager();
            await mapManager.initialize();
            const uiManager = new UIManager(mapManager);
            
            // 将 uiManager 保存为全局变量，以便 MapManager 可以访问
            window.uiManager = uiManager;
        });
    </script>
  </body>
</html>